@import 'reset.css';
@import '../fonts/iconfont.css'; 
@import '../fonts/bankLogo.css';
@import 'variables';
@import 'common';
 ::-webkit-input-placeholder {
    color: #CCCCCC;
}

.wx-login-bg {
    background: url("../img/bg-login.png") no-repeat;
    background-size: contain;
    .px2rem(background-position;
    0;
    20px);
    .tc;
    >i {
        .px2rem(width;
        120px);
        .px2rem(height;
        120px);
        display: inline-block;
        background: url(../img/img-logo.png) no-repeat;
        .px2rem(background-size;
        120px);
        .px2rem(margin-top;
        80px);
    }
    .wx-formlist {
        .px2rem(margin;
        0;
        40px);
        .px2rem(margin-top;
        0px);
        .px2rem(padding;
        0);
        li {
            >div.tl {
                font-size: 0;
            }
            .px2rem(padding;
            17px;
            15px);
            .px2rem(padding-top;
            37px);
            .wx-input-group {
                input {
                    font-size: 16px;
                    .tl;
                    .px2rem(padding-left;
                    15px);
                    background: transparent;
                }
            }
        }
    }
    //按钮
    .wx-btn {
        display: block;
        color: #fff;
        .px2rem(margin-left;
        40px);
        .px2rem(margin-right;
        40px);
    }
}

//提示层
.wx-tips {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    .clf;
    display: none;
    .wx-tips-box {
        position: absolute;
        background: rgba(0, 0, 0, 0.5);
        .px2rem(border-radius;
        8px);
        .px2rem(width;
        240px);
        .tc;
        .px2rem(padding;
        10px;
        40px);
        font-size: 16px;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        top: 50%;
    }
    .wx-tips-text2 {
        position: absolute;
        width: 80%;
        .bgf;
        .tc;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        top: 40%;
        .px2rem(padding-top;
        30px);
        .iconfont {
            font-size: 80px;
        }
    }
    &.wx-tips-old {
        font-size: 14px;
        background: rgba(0, 0, 0, 0.5);
    }
}

//提示层
.wx-confirm {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 300;
    .clf;
    display: none;
    .wx-confirm-text {
        .close{
        position: absolute;
        .px2rem(top;10px);
        .px2rem(right; 10px);
        &:before {
        display: block;
        font-size: 16px;
        font-family: sans-serif;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        .px2rem(padding-right;
        4px);
        content: "X";
        color: #ccc;
    }
    }
        font-size: 16px;
        position: absolute;
        width: 80%;
        .bgf;
        .tc;
        .cl0;
        left: 50%;
        box-shadow: 0 0 16px 0;
        .px2rem(border-radius;
        6px);
        .px2rem(padding;
        32px;
        20px);
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        top: 40%;
        .px2rem(padding-top;
        30px);
        .iconfont {
            font-size: 80px;
        }
    }
    .wx-confirm-btn {
        .wx-btn;
        .px2rem(margin-top;
        20px);
        .px2rem(height;
        40px);
        .px2rem(line-height;
        40px);
        font-size: 14px;
        .px2rem(margin-left;
        0);
        .px2rem(margin-right;
        0);
    }
    .wx-confirm-btn2 {
        .wkbox;
        >div{
            .wkbox .autoW;
            .wx-btn;
         &:last-child{
        .wx-btnf;
        .px2rem(margin-left; 5px);
        }
         &:first-child{
        .px2rem(margin-right; 5px);
        }
        .px2rem(margin-top;
        20px);
        .px2rem(height;
        40px);
        .px2rem(line-height;
        38px);
        font-size: 14px;
        .px2rem(margin-left;
        0);
        .px2rem(margin-right;
        0);
        }
    }
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 300;
    .clf;
    display: none;
}

.wx-tips.wx-tips-success .wx-tips-text:before {
    content: "\e600";
}

.wx-tips.wx-tips-error .wx-tips-text:before {
    content: "\e603";
}

//列表
ul.wx-formlist {
    .px2rem(padding;
    0;
    20px);
    font-size: 16px;
    position: relative;
    li {
        &.twoLine {
            .px2rem(padding;
            10px;
            12px);
            .px2rem(padding-top;
            30px);
        }
        .cl6;
        .px2rem(padding;
        17px;
        0);
        .px2rem(padding-top;
        37px);
        position: relative;
        &:after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 1px;
            content: '';
            //          -webkit-transform: scaleY(.5);
            //          transform: scaleY(.5);
            background-color: #E3EEF2;
        }
        &.error {
            .error-tips {
                display: block;
                position: absolute;
                top: 100%;
                left: 0;
                .px2rem(padding;
                4px;
                0);
                .clh;
                font-size: 14px;
            }
            &:after {
                background-color: @colorh;
            }
        }
        .center-tips {
            display: block;
            position: absolute;
            top: 100%;
            left: 0;
            .tc;
            .px2rem(padding;
            4px;
            0);
            .cl6;
            width: 100%;
            font-size: 12px;
        }
        &:after {}
        &.noLine:after {
            height: 0;
        }
        .wx-input-group {
            position: relative;
            .wx-form-text {
                display: inline-block;
            }
            .wx-select {
                position: absolute;
                z-index: 100;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }
            input {
                border: 0;
                text-align: left;
                width: 100%;
                height: 100%;
                .cl3;
                .px2rem(padding-left;
                15px);
            }
        }
        .wx-navigate-right:after {
            .cl3c;
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
            content: "\e6d6";
        }
        &.active:after {
            background-color: #448EF6;
        }
    }
    &.topLine li:first-child:before {
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #ddd;
        z-index: 600;
    }
    &.wx-formlist-mh {
        li {
            .px2rem(height;
            65px);
        }
    }
    &.readonly {
        li {
            .px2rem(padding;
            17px;
            12px);
            .wkbox;
            >div:first-child {
                .cl9;
            }
            >div:last-child {
                .wkbox .autoW;
                .tr;
                .cl0;
                >b {
                    font-size: 24px;
                    .px2rem(padding-right;
                    2px);
                }
            }
        }
        &.desc {
            li {
                >div:first-child {
                    .cl6;
                }
                >div:last-child {
                    .cl9;
                }
            }
        }
    }
    &.notop {
        li {
            .px2rem(padding-top;
            17px);
        }
    }
    &.linoplr {
        >li {
            .px2rem(padding;
            27px;
            0px);
            div.autoW {
                padding-left: 20px;
            }
        }
    }
}

ul.wx-formlist-noicon {
    li {
        .wx-input-group {
            input {
                text-align: right;
            }
        }
    }
}

//按钮
.wx-btn {
    display: block;
    color: #fff;
    .px2rem(margin-left;
    20px);
    .px2rem(margin-right;
    20px);
    .px2rem(margin-top;
    40px);
    .px2rem(border-radius;
    26px);
    text-align: center;
    height: @btnH;
    line-height: @btnH - 2;
    -webkit-transition: all;
    transition: all;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    font-size: 18px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    background: @colorbase;
    border: 1px solid @colorbase-p;
    //:448EF6:0.5
    box-shadow: 0 4px 16px 0 rgba(68, 142, 246, 0.50);
    ;
    &.wx-active {
        background: @colorbase-p;
    }
    &.wx-disabled {
        background: @colorbase-d;
        box-shadow: none;
        border: 0;
    }
}

.wx-btnh {
    box-shadow: none;
    color: @colorh;
    background: #fff;
    border: 1px solid @colorh;
    &.wx-active {
        color: #fff;
        background: @colorh;
    }
    &.wx-disabled {
        background: @colorbase-d;
    }
}

.wx-btnf {
    box-shadow: none;
    background: #fff;
    color: @colorbase;
    border-top: 1px solid @colorbase;
    &.wx-active {
        background: @colorf-p;
    }
    &.wx-disabled {
        color: #ccc;
    }
}

.wx-topTip {
    position: fixed;
    font-size: 14px;
    top: 0;
    left: 0;
    width: 100%;
    .px2rem(padding;
    10px;
    20px);
    background-color: @colorh;
    color: #fff;
    .wkbox;
    &:before {
        display: block;
        font-size: 16px;
        font-family: "iconfont" !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        .px2rem(padding-right;
        4px);
        content: "\e6d5";
        color: #FFB997;
    }
    &.wx-topTip-error {
        background-color: @colorh;
        color: #fff;
        &:before {
            color: #FFB997;
            content: "\e6d5";
        }
    }
    &.wx-topTip-info {
        background-color: #FFF3E0;
        color: #FD9556;
    }
    &.wx-topTip-warning {
        background-color: @colorh;
        font-size: 12px;
        .clf;
    }
}

.mt30 {
    .px2rem(margin-top;
    30px)
}

.mt20 {
    .px2rem(margin-top;
    20px)
}

.mt40 {
    .px2rem(margin-top;
    40px)
}

.wx-link {
    display: block;
    .tc;
    &.tl{
        .tl;
    }
    .lhp;
    color: @colorbase;
    .px2rem(padding;
    20px;
    20px);
    .px2rem(padding-bottom;
    0px);
    font-size: 14px;
    >input {
        .px2rem(width; 20px);
        visibility: hidden;
        &+label {
            .tc;
            position: relative;
            //.px2rem(padding-left; 24px);
            &:before {
                position: absolute;
                top: 0px;
                left: -24px;
                content: '';
                display: inline-block;
                width: 16px;
                height: 16px;
                border: 1px solid #ccc;
                cursor: pointer;
                border-radius: 4px;
                line-height: 17px;
            }
        }
        &:checked+label {
            &:before {
                font-family: "iconfont" !important;
                font-size: 12px;
                font-style: normal;
                font-weight: 800;
                color: #fff;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                content: '\e6df';
                border: 1px solid @colorlan;
                background: @colorlan;
            }
        }
    }
}

.wx-tips-text {
    .px2rem(padding;
    10px;
    12px);
    //  .px2rem(margin;
    //  20px);
    background: #E3FAFE;
    font-size: 14px;
    color: #005792;
    .px2rem(line-height;
    20px);
    //  .px2rem(border-radius;
    //  6px);
}

.wx-uploadimg-wrap {
    .img-list {
        font-size: 0;
        .px2rem(padding;
        20px);
        .px2rem(padding-right;
        5px);
        li {
            .px2rem(margin-bottom;
            10px);
            display: inline-block;
            vertical-align: top;
            .px2rem(margin-right;
            15px);
            position: relative;
            .px2rem(width;
            100px);
            .px2rem(height;
            100px);
            .tc;
            >i,
            >span {
                display: block;
            }
            >img {
                display: block;
                width: 100%;
                height: 100%;
            }
            span.delete {
                position: absolute;
                .px2rem(top;
                -8px);
                .px2rem(right;
                -8px);
                color: #309AF3;
                font-size: 24px;
            }
            &.addimg {
                background: #F5F5F5;
                .px2rem(border-radius;
                8px);
                .px2rem(padding-top;
                30px);
                color: #bdbdbd;
                >i {
                    font-size: 20px;
                }
                >span {
                    .px2rem(margin-top;
                    15px);
                    font-size: 12px;
                }
            }
            &.chooseImg {
                .px2rem(width;
                100px);
                .px2rem(height;
                140px);
                color: #8EA6B4;
                .bgf;
                >div.img-wrap {
                    .px2rem(width;
                    100px);
                    .px2rem(height;
                    100px);
                    .px2rem(border-radius;
                    8px);
                    background: #EEEEEE;
                    //border: 1px solid #8EA6B4;
                    ;
                    &.error {
                        border: 1px solid @colorh;
                    }
                    img {
                        border: 0;
                        .px2rem(border-radius;
                        8px);
                        width: 100%;
                        height: 100%;
                    }
                    >i {
                        display: block;
                        font-size: 40px;
                        .px2rem(line-height;
                        100px);
                        color: #ccc;
                    }
                    >span {
                        display: block;
                        .px2rem(margin-top;
                        15px);
                        font-size: 12px;
                    }
                }
                >span.sl {
                    margin: 0;
                    display: block;
                    .cllan;
                    font-size: 12px;
                }
                >span.btext {
                    margin: 0;
                    display: block;
                    .px2rem(padding;
                    8px;
                    0);
                    font-size: 12px;
                    line-height: 1.4;
                    color: #666;
                }
            }
            &:first-child {
                .px2rem(margin-left;
                0);
            }
        }
    }
    .text-tips {
        font-size: 12px;
        .px2rem(margin;
        20px);
        .px2rem(padding-top;
        20px);
        border-top: 1px dashed #bdbdbd;
        line-height: 1.5;
        h6 {
            .cl3;
            .px2rem(margin-bottom;
            6px);
        }
        p {
            .px2rem(margin-bottom;
            6px);
            .cl6;
        }
    }
    &.uploadID {
        .img-list {
            .px2rem(padding;
            40px;
            50px);
            .px2rem(padding-bottom;
            0);
            li.chooseImg {
                display: block;
                width: 100%;
                .px2rem(height;
                160px);
                .px2rem(margin-bottom;
                20px);
                >div.img-wrap {
                    background: #fff;
                    border: 1px solid #8EA6B4;
                    width: 100%;
                    .px2rem(height;
                    160px);
                }
                >div.img-wrap>i {
                    font-size: 40px;
                    .px2rem(padding-top;
                    30px);
                    line-height: inherit;
                }
                >div.img-wrap>span {
                    font-size: 16px;
                }
                &.single{
                   .px2rem(height;360px); 
                    >div.img-wrap {
                        .px2rem(height;
                        360px);
                    }
                    >div.img-wrap>i {
                        font-size: 50px;
                        .px2rem(padding-top;
                        130px);
                        line-height: inherit;
                    }
                }
            }
        }
    }
}

.fixBottom {
    .wx-btn {
        .px2rem(margin-top;
        10px)
    }
}

//切换 tab
.wx-tab {
    .wkbox;
    position: relative;
    .bgf;
    li {
        width: 50%;
        .tc;
        .px2rem(padding;
        14px;
        0);
        font-size: 14px;
        position: relative;
        color: #8EA6B4;
        &.active {
            color: #000;
        }
        &.red {
            &:after {
                content: '';
                width: 6px;
                height: 6px;
                background: @colorh;
                display: block;
                border-radius: 3px;
                margin-left: 36px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
            }
        }
    }
    i {
        width: 50%;
        position: absolute;
        bottom: 0;
        height: 2px;
        background-color: @colorbase;
        left: 0;
        -webkit-transition-duration: 0.5s;
        /* Safari 和 Chrome */
        transition-timing-function: ease-in;
    }
    &.wx-tab3 {
        li {
            width: 33.33333%;
        }
        i {
            width: 33.33333%;
        }
    }
    &.wx-tab-fill {
        .px2rem(margin;
        16px;
        20px);
        .px2rem(margin-bottom;
        0);
        overflow: hidden;
        .px2rem(border-radius;
        4px);
        border: 1px solid @colorh;
        li {
            .bgf;
            width: 50%;
            .tc;
            .px2rem(padding;
            6px;
            0);
            font-size: 12px;
            .clh;
            border-right: 1px solid @colorh;
            &:last-child {
                border-right: 0;
            }
            &.active {
                .clf;
                .bgh
            }
        }
    }
}

.wx-tab-content {
    .wx-tab-pane {
        display: none;
        &.active {
            display: block;
        }
    }
}

.loan-list {
    padding-top: 1px;
    .loan-tips {
        background: #FF4057;
        font-size: 14px;
        color: #FFFFFF;
        margin: 20px;
        margin-bottom: 0;
        padding: 8px 12px;
        padding-right: 30px;
        line-height: 18px;
        border-radius: 4px;
        position: relative;
        &:after {
            display: block;
            .clf;
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
            content: "\e6d6";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            right: 12px;
        }
    }
    font-size: 16px;
    .btn-box {
        .px2rem(padding;
        12px;
        20px);
        .px2rem(padding-bottom;
        20px);
        .tr;
        .btn {
            border: 1px solid #448EF6;
            font-size: 14px;
            color: #448EF6;
            .px2rem(padding;
            6px;
            20px);
            display: inline-block;
            .px2rem(border-radius;
            17px);
        }
    }
    .px2rem(margin-top;
    20px);
    .title {
        .px2rem(padding;
        24px;
        32px);
        .cl0;
        span {
            background: #8EA6B4;
            display: block;
            .clf;
            .px2rem(padding;
            2px;
            8px);
            font-size: 12px;
            text-align: center;
            .px2rem(border-radius;
            12px);
            &.blue {
                background: #448EF6;
            }
            &.red {
                background: @colorh;
            }
        }
    }
    .bgf;
}

.card-top {
    background: #f5f5f5;
    .px2rem(padding;
    20px);
    .px2rem(padding-bottom;
    0);
    .clf;
    .card-top-blue-wrap {
        .px2rem(border-top-left-radius;
        8px);
        .px2rem(border-top-right-radius;
        8px);
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#111349), to(#1885C3));
        .card-top-blue {
            background: url("../img/bg-card.png") no-repeat;
            background-size: contain;
            background-position: right;
            font-size: 14px;
            b {
                font-size: 28px;
                color: #44D1FF;
                .px2rem(margin-right;
                6px);
            }
            .px2rem(padding;
            17px;
            20px);
            .title {
                border-bottom: 1px dashed #fff;
                .px2rem(padding-bottom;
                10px);
                span {
                    background: #448EF6;
                    display: block;
                    color: #fff;
                    .px2rem(padding;
                    2px;
                    8px);
                    font-size: 12px;
                    text-align: center;
                    .px2rem(border-radius;
                    12px);
                    &.red{
                        background: #FB929E;
                    }
                }
            }
        }
    }
    .card-top-red-wrap {
        .card-top-blue-wrap;
        background: -webkit-gradient(linear, 0 0, 100% 100%, from(#FFA17D), to(#FF6B6B));
        .card-top-red {
            .card-top-blue;
        }
    }
}

ul.wx-formlist li.wx-money-control {
    .title {
        .cl6;
    }
    .wx-input-group {
        .tc;
        input {
            .px2rem(margin-top;
            10px);
            .tc;
            font-size: 32px;
            .px2rem(padding;
            0;
            10px);
        }
    }
    .add,
    .reduce {
        .wx-btn;
        .px2rem(margin;
        10px);
        .px2rem(margin-top;
        44px);
        .px2rem(width;
        27px);
        .px2rem(height;
        27px);
        .tc;
        .px2rem(line-height;
        23px);
        .px2rem(border-radius;
        17px);
        box-shadow: 2px 2px 8px 0 rgba(68, 142, 246, 0.50);
        &.disabled{
            background: #ccc;
            box-shadow: none;
            border: 1px solid #ccc;
        }
    }
}

.index-nav {
    position: relative;
    .px2rem(margin;
    10px);
    z-index: 99;
    font-size: 12px;
    .px2rem(margin-top;
    -30px);
    .px2rem(padding;
    20px;
    0);
    background: #fff;
    .px2rem(border-radius;
    8px);
    box-shadow: 0 0 16px 0 rgba(142, 166, 180, 0.50);
    .wkbox;
    .tc;
    >div {
        .wkbox .autoW;
        svg {
            .px2rem(width;
            32px);
            .px2rem(height;
            32px);
        }
    }
}

.index-card {
    &.first{
        .px2rem(margin-top;
    -30px);
    z-index: 99;
    position: relative;
    }
    font-size: 14px;
    .px2rem(margin;
    12px);
    .px2rem(margin-top;
    20px);
    .bgf;
    .px2rem(padding;
    20px);
    .px2rem(border-radius;
    8px);
    box-shadow: 0 0 16px 0 rgba(142, 166, 180, 0.50);
    .title {
        background: #FFBAAB;
        .px2rem(padding;
        9px;
        12px);
        .px2rem(border-radius;
        4px);
        .wkbox;
        font-size: 16px;
        color: #B05454;
        .icon {
            display: block;
            .px2rem(width;
            40px);
            .px2rem(height;
            40px);
        }
        >div:last-child {
            .px2rem(padding-left;
            4px);
            .wkbox .autoW;
        }
        &.cjd {
            background: #FFE598;
            color: #C88337;
        }
        &.xfd {
            background: #FFC4D0;
            color: #C95A5A;
        }
        &.xyk {
            background: #AEDEFC;
            color: #5F7E9F;
        }
    }
    >ul {
        li {
            .px2rem(padding;
            20px;
            0);
            .px2rem(padding-top;
            14px);
            font-size: 14px;
            color: #000000;
            border-bottom: 1px dashed #ccc;
            >div {
                .px2rem(padding-top;
                10px);
                span.num {
                    font-size: 28px;
                    color: #FF6B6B;
                    .px2rem(padding-right;
                    4px);
                }
            }
            >.bottom {
                .px2rem(padding-top;
                2px);
                .cl6;
                font-size: 12px;
                .wkbox;
                >div {
                    .wkbox .autoW;
                }
                >span {
                    background: #EBF4F7;
                    .px2rem(padding;
                    2px;
                    12px);
                    .px2rem(border-radius;
                    10px);
                }
            }
        }
    }
    >a {
        display: block;
        .px2rem(padding-top;
        20px);
        font-size: 14px;
        color: #8EA6B4;
        text-align: right;
        &:after {
            .cl3c;
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
            content: "\e6d6";
        }
        &:visited,
        &:active {
            color: #8EA6B4;
        }
    }
}

.mui-slider-indicator {
    .px2rem(bottom;
    42px);
    .mui-indicator {
        .px2rem(width;
        12px);
        .px2rem(height;
        4px);
        .px2rem(margin;
        1px;
        2px);
        border: 0;
        opacity: 0.1;
        cursor: pointer;
        .px2rem(border-radius;
        2px);
        background: #000;
    }
    .mui-active.mui-indicator {
        background: #44D1FF;
        border: 0;
        box-shadow: none;
        opacity: 1;
    }
}

.nav-bottom {
    font-size: 10px;
    color: #8EA6B4;
    .wkbox;
    position: fixed;
    z-index: 200;
    bottom: 0;
    width: 100%;
    .px2rem(height;
    70px);
    &:before {
        content: '';
        display: block;
        z-index: 200;
        .px2rem(height;
        85px);
        width: 100%;
        position: absolute;
        .px2rem(top;
        -15px);
        left: 0;
        background: url(../img/bg-index-nav.png) no-repeat center top;
        .px2rem(background-size;
        632px;
        auto);
    }
    >div {
        .px2rem(padding-top;
        12px);
        .tc;
        line-height: 1.6;
        position: relative;
        z-index: 300;
        .wkbox .autoW;
        svg {
            .px2rem(width;
            28px);
            .px2rem(height;
            28px);
        }
        &.center {
            .px2rem(padding-top;
            0px);
            svg {
                .px2rem(width;
                40px);
                .px2rem(height;
                40px);
            }
        }
    }
    ~.wx-content {
        .px2rem(padding-bottom;
        100px);
    }
}

.icon-box {
    .tc;
    font-size: 14px;
    .cl6;
    .px2rem(padding;
    80px;
    40px);
    .icon-chenggong {
        background: url("../img/icon-success.png") no-repeat;
        background-size: 100%;
        .px2rem(width;
        160px);
        .px2rem(height;
        160px);
        display: inline-block;
        &:before {
            content: '';
        }
    }
    .icon-tips {
        background: url("../img/icon-tips.png") no-repeat;
        background-size: 100%;
        .px2rem(width;
        160px);
        .px2rem(height;
        160px);
        display: inline-block;
        &:before {
            content: '';
        }
    }
    .icon-wait {
        background: url("../img/icon-wait.png") no-repeat;
        background-size: 100%;
        .px2rem(width;
        160px);
        .px2rem(height;
        160px);
        display: inline-block;
        &:before {
            content: '';
        }
    }
    .icon-loading {
        background: url("../img/loading-gif.gif") no-repeat;
        background-size: 100%;
        .px2rem(width;
        80px);
        .px2rem(height;
        80px);
        display: inline-block;
        &:before {
            content: '';
        }
    }
    .icon-shibai {
        background: url("../img/icon-fail.png") no-repeat;
        background-size: 100%;
        .px2rem(width;
        160px);
        .px2rem(height;
        160px);
        color: @colorl;
        display: inline-block;
        &:before {
            content: '';
        }
    }
    .icon-weikong {
        background: url("../img/icon-empty.png") no-repeat;
        background-size: 100%;
        .px2rem(width;
        80px);
        .px2rem(height;
        80px);
        color: @colorl;
        display: inline-block;
        &:before {
            content: '';
        }
    }
    .icon-dengdaijieguo {
        font-size: 90px;
        color: #FFB25A;
    }
    .icon-weibangding {
        font-size: 90px;
        .cl9;
    }
    .wx-btn {
        .px2rem(margin-left;
        0);
        .px2rem(margin-right;
        0);
        .px2rem(margin-top;
        40px);
    }
}

.myindex {
    .px2rem(padding;
    20px);
    background: url("../img/bg-myindex.png") no-repeat;
    background-size: cover;
    .top {
        .wkbox;
        .headimg {
            .px2rem(width;
            56px);
            .px2rem(height;
            56px);
            .px2rem(padding;
            3px);
            .px2rem(border-radius;
            28px);
            position: relative;
            .bgf;
            img {
                .px2rem(width;
                50px);
                .px2rem(height;
                50px);
                .px2rem(border-radius;
                25px);
                display: block;
            }
            >input[type="file"] {
                position: absolute;
                left: 0;
                top: 0;
                .px2rem(width;
                56px);
                .px2rem(height;
                56px);
                display: block;
                opacity: 0;
            }
        }
        .name {
            .px2rem(padding-left;
            20px);
            font-size: 18px;
            color: #FFFFFF;
            .px2rem(line-height;
            18px);
            .auth {
                .px2rem(margin-top;
                12px);
                line-height: 1;
                background: #8EA6B4;
                font-size: 12px;
                .wkbox;
                .px2rem(padding;
                2px;
                8px);
                .px2rem(border-radius;
                10px);
                >svg {
                    .px2rem(margin-right;
                    4px);
                    display: block;
                    font-size: 0;
                    .px2rem(width;
                    14px);
                    .px2rem(height;
                    14px);
                }
            }
            .cllan {
                font-size: 18px;
                color: #44D1FF;
            }
        }
        .edit {
            .wkbox .autoW;
            .tr;
            .px2rem(padding-bottom;
            28px);
        }
    }
}

.myindex-nav {
    font-size: 12px;
    color: #44D1FF;
    .px2rem(padding;
    30px;
    0);
    .px2rem(padding-bottom;
    33px);
    .px2rem(border-radius;
    8px);
    .wkbox;
    .tc;
    >div {
        width: 33.3333%;
        svg {
            .px2rem(width;
            40px);
            .px2rem(height;
            40px);
        }
    }
}

.myindex-card {
    .clh {
        color: #FB929E;
    }
    &.first {
        .px2rem(margin-top;
        -30px);
    }
    font-size: 14px;
    .px2rem(margin;
    10px);
    .px2rem(margin-top;
    20px);
    .bgf;
    .px2rem(border-radius;
    8px);
    box-shadow: 0 0 16px 0 rgba(142,
    166,
    180,
    0.50);
    .title {
        .px2rem(padding;
        16px;
        20px);
        border-bottom: 1px solid #ccc;
        .wkbox;
        font-size: 14px;
        color: #666;
        .icon {
            .px2rem(margin-right;
            6px);
            display: block;
            .px2rem(width;
            22px);
            .px2rem(height;
            22px);
        }
        >div:last-child {
            .px2rem(padding-left;
            4px);
            .wkbox .autoW;
        }
        a {
            display: block;
            font-size: 14px;
            color: #8EA6B4;
            text-align: right;
            &:after {
                .cl3c;
                font-family: "iconfont" !important;
                font-size: 16px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -webkit-text-stroke-width: 0.2px;
                -moz-osx-font-smoothing: grayscale;
                content: "\e6d6";
            }
            &:visited,
            &:active {
                color: #8EA6B4;
            }
        }
    }
    >ul {
        >li {
            .btnList{
                border-top: 1px dashed #ccc;
                .px2rem(margin-top; 10px);
                .px2rem(padding-top; 10px);
                .tr;
                .btn {
                    border: 1px solid #448EF6;
                    font-size: 14px;
                    color: #448EF6;
                    .px2rem(padding;
                    6px;
                    20px);
                    display: inline-block;
                    .px2rem(border-radius;
                    17px);
                }
            }
            
            .proname {
                .icon-haolb{
                    display: block;
                    width: 20px;
                    height: 20px;
                    background: #ffb25a;
                    color: #fff;
                    .tc;
                    line-height: 20px;
                    border-radius:4px; 
                    &:before{
                        display: block;
                        content: '好';
                        font-size: 12px;
                    }
                }
                .icon-wanyx{
                    .icon-haolb;
                    &:before{
                        content: '万';
                    }
                }
                .status {
                    background: #448EF6;
                    .clf;
                    .px2rem(padding;
                    2px;
                    8px);
                    .px2rem(border-radius;
                    10px);
                    font-size: 12px;
                    &.red{
                        background: #FB929E;
                    }
                }
            }
            .number {
                border-bottom: 1px dashed #ccc;
                .px2rem(margin-left;
                28px);
                .px2rem(padding-top;
                10px);
                .px2rem(padding-bottom;
                10px);
                font-size: 14px;
                color: #000000;
                >div:last-child {
                    .px2rem(padding-top;
                    10px);
                    span {
                        font-size: 28px;
                        color: #FB929E;
                        .px2rem(padding-right;
                        10px);
                    }
                }
            }
            >ul {
                .px2rem(margin-top;
                10px);
                font-size: 12px;
                .cl6;
                .px2rem(padding-left;
                28px);
                >li {
                    .wkbox;
                    .px2rem(padding;
                    2px;
                    0);
                    >div:first-child {
                        .wkbox .autoW;
                    }
                }
            }
            .px2rem(padding;
            20px);
            .px2rem(padding-top;
            14px);
            font-size: 14px;
            color: #000000;
            border-bottom: 1px dashed #ccc;
        }
        >li:last-child {
            border-bottom: 0;
        }
    }
    .selectbox {
        .px2rem(margin;
        0;
        20px);
        .px2rem(padding;
        10px;
        0);
        .wkbox;
        border-bottom: 1px dashed #ccc;
        select {
            .wkbox .autoW;
        }
        &:after {
            display: block;
            z-index: 999;
            .cl3c;
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
            content: "\e6d6";
        }
    }
    .bankcardbox {
        .px2rem(padding;
        20px);
        .bankcard-wrap {
            .px2rem(border-radius;
            8px);
            overflow: hidden;
            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#FFB092), to(#FF6B6B));
            .bankcard {
                .wkbox;
                background: url(../img/bg-card.png) no-repeat;
                background: contain;
                .px2rem(padding;
                20px);
                .clf;
                .bankLogo {
                    font-size: 40px;
                    &:before {
                        .clf;
                    }
                }
            }
        }
    }
}

.loan-detail-card {
    .myindex-card;
    >ul {
        >li {
            .number {
                .px2rem(margin-left;
                0);
            }
            .proname {
                font-size: 12px;
                color: #666666;
            }
            border-bottom: 1px solid #ccc;
            >ul {
                li {}
            }
            .btn-box {
                .px2rem(padding-top;
                10px);
                .px2rem(padding-bottom;
                0);
                .tr;
                .btn {
                    border: 1px solid #448EF6;
                    font-size: 14px;
                    color: #448EF6;
                    .px2rem(padding;
                    6px;
                    20px);
                    display: inline-block;
                    .px2rem(border-radius;
                    17px);
                }
            }
        }
    }
    &.loan-detail-info {
        .px2rem(padding;
        28px;
        10px);
        .wkbox;
        .tc;
        font-size: 12px;
        color: #666666;
        >div {
            width: 33.3333%;
            span {
                font-size: 20px;
                color: #FB929E;
                .px2rem(padding-right;
                4px);
            }
            >div:last-child {
                font-size: 14px;
                color: #000000;
                margin-top: 2px;
            }
        }
    }
    >ul.wx-formlist li {
        border: 0;
    }
}

.loan-detail {
    .myindex;
    .px2rem(padding-bottom;
    32px);
    >ul {
        >li {
            .proname {
                .px2rem(padding-bottom;
                20px);
                border-bottom: 1px dashed #ccc;
                span {
                    color: #44D1FF;
                }
            }
            .number {
                >div span.status {
                    background: #448EF6;
                    .clf;
                    .px2rem(padding;
                    2px;
                    8px);
                    .px2rem(border-radius;
                    10px);
                    font-size: 12px;
                }
                .px2rem(padding-top;
                12px);
                .px2rem(padding-bottom;
                10px);
                font-size: 14px;
                color: #fff;
                >div:last-child {
                    .px2rem(padding-top;
                    10px);
                    span {
                        .px2rem(padding-right;
                        6px);
                        font-size: 28px;
                        color: #44D1FF;
                    }
                }
            }
            .px2rem(padding;
            20px);
            .px2rem(padding-top;
            14px);
            font-size: 14px;
            color: #fff;
        }
        >li:last-child {
            border-bottom: 0;
        }
    }
}

.proindex {
    .px2rem(padding;
    20px);
    .px2rem(padding-bottom;
    100px);
    background: url("../img/bg-pro-kkd.png") no-repeat;
    background-size: 100% 100%;
    .tc;
    .clf;
    position: relative;
    .btn {
        position: absolute;
        .px2rem(right;
        20px);
        .px2rem(top;
        20px);
    }
    .text {
        .px2rem(padding-top;
        20px);
    }
    .num {
        .px2rem(padding-top;
        12px);
        span {
            font-size: 40px;
            text-shadow: 0 0 4px rgba(233,113,51,0.5);
        }
    }
    .label {
        .px2rem(padding-top;
        20px);
        span {
            font-size: 14px;
            border: 1px solid #FFFFFF;
            .px2rem(border-radius;
            14px);
            .px2rem(padding;
            2px;
            14px);
        }
        &.shuijin span{
            display: inline-block;
            opacity: .8;
            font-size: 14px;
            .px2rem(border-radius;
            0);
            border-left: 0;
            border-right: 0;
            border-top: 1px solid #FFFFFF;
            border-bottom: 1px solid #FFFFFF;
            .px2rem(padding;2px;4px);
        }
    }
    &.red {
        background: url("../img/bg-pro-posd.png") no-repeat;
        background-size: 100% 100%;
    }
    &.purple {
        background: url("../img/bg-pro-purple.png") no-repeat;
        background-size: 100% 100%;
        .num {
        span {
            text-shadow: 0 0 4px rgba(44,75,232,0.5);
        }
    }
    }
    &.purple-sj {
        background: url("../img/bg-pro-purple.png") no-repeat;
        background-size: 100% 100%;
        .num {
        span {
            text-shadow: 0 0 4px rgba(44,75,232,0.5);
        }
    }
    .px2rem(padding-bottom;
    60px);
    }
}

.protext {
    font-size: 14px;
    .px2rem(padding;
    20px);
    .px2rem(padding-bottom;
    0);
}

.proindex-item {
    font-size: 12px;
    .px2rem(padding;
    20px;
    0);
    .px2rem(border-radius;
    8px);
    .wkbox;
    .tc;
    >div {
        width: 33.3333%;
        svg {
            .px2rem(width;
            40px);
            .px2rem(height;
            40px);
        }
    }
}

.card-top {
    .bankcard {
        .wkbox;
        background: contain;
        .px2rem(padding;
        20px);
        .clf;
        .bankLogo {
            font-size: 40px;
            &:before {
                .clf;
            }
        }
    }
}

.wx-label {
    margin: 16px 20px 0;
    overflow: hidden;
    li {
        .tc;
        .px2rem(height; 28px);
        .px2rem(line-height; 28px);
        .bgf;
        .cl9;
        .px2rem(border-radius; 14px);
        font-size: 12px;
        box-sizing: content-box;
        display: inline-block;
        -webkit-transition: all;
        transition: all;
        -webkit-transition-timing-function: linear;
        transition-timing-function: linear;
        -webkit-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        &.active {
            .bgh;
            .clf;
        }
        &:last-child {
            border-right: 0;
        }
    }
}

.posls-info {
    .loan-detail-card;
    .loan-detail-info;
    background: #EBF4F7;
    box-shadow: none;
    .px2rem(margin; 20px);
    .px2rem(padding; 20px ;0);
    >div{   
        .wkbox .autoW;
        width: auto;
    }
}

.repaymentplan-list {
    padding-top: 0;
    .px2rem(padding; 0; 20px);
    >li {
        padding: 15px 0;
        font-size: 12px;
        border-bottom: 1px dashed #ccc;
        .line-1 {
            span {
                color: #448EF6;
            }
        }
        .line-2 {
            .px2rem(padding-left; 14px);
            .px2rem(padding-top; 14px);
        }
        .line-3 {
            .px2rem(padding-top; 4px);
            font-size: 14px;
            .px2rem(padding-left; 14px);
            span {
                font-size: 20px;
                color: #FB929E;
                .px2rem(padding-right; 4px);
            }
            >div:last-child {
                .cl9;
            }
            b {
                font-size: 14px;
                color: #000000;
            }
        }
        >div {
            .wkbox;
            >i {
                .px2rem(margin-right; 10px);
                .px2rem(width; 4px);
                .px2rem(height; 12px);
                .px2rem(border-radius; 2px);
                display: block;
                background: #448EF6;
            }
            >div.autoW {
                .wkbox .autoW;
            }
            >div:first-child {
                .wkbox .autoW;
            }
            span.status {
                background: #448EF6;
                .clf;
                .px2rem(padding;
                2px;
                12px);
                .px2rem(border-radius;
                10px);
                font-size: 12px;
            }
        }
        &.gray {
            .status {
                background: #8EA6B4;
            }
            i {
                background: #8EA6B4;
            }
            span {
                .cl6;
            }
            .line-3 {
                span {
                    .cl9;
                }
            }
        }
        &.red {
            .status {
                background: #FB929E;
            }
            i {
                background: #FB929E;
            }
            span {
                color: #FB929E;
            }
            .line-3 {
                span {
                    color: #FB929E;
                }
            }
        }
    }
}

ul.wx-formlist-more {
    >li {
        .px2rem(padding;
        27px;
        12px);
        div.autoW {
            .px2rem(padding-left; 20px);
        }
    }
}

.wx-notice-list {
    li {
        .title {
            .cl0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 800;
            position: relative;
            .px2rem(padding-right; 20px);
            &:after {
                font-weight: 400;
                position: absolute;
                right: 0px;
                top: 50%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                .cl3c;
                font-family: "iconfont" !important;
                font-size: 16px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -webkit-text-stroke-width: 0.2px;
                -moz-osx-font-smoothing: grayscale;
                content: "\e6d6";
            }
            &.active {
                .px2rem(padding-left; 20px);
                &:before {
                    position: absolute;
                    left: 0px;
                    top: 50%;
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    content: "";
                    width: 10px;
                    height: 10px;
                    display: block;
                    border-radius: 5px;
                    background: @colorlan;
                }
            }
        }
        .date {
            font-size: 12px;
            .px2rem(margin-top; 10px);
        }
        .text {
            font-size: 14px;
            .px2rem(margin-top; 16px);
        }
    }
}

.wx-list-colorcard {
    .px2rem(padding; 20px);
    padding-top: 0;
    li {
        position: relative;
        .px2rem(margin-top; 40px);
        .px2rem(border-radius;
        8px);
        .clf;
        overflow: hidden;
        background: -webkit-gradient(linear, 0 0, 100% 100%, from(#FFCF5A), to(#FF6F6F));
        box-shadow: 0 4px 16px 0 rgba(255, 146, 90, 0.50);
        .content {
            .px2rem(padding;
            20px;
            32px);
            background: url(../img/bg-card.png) no-repeat;
            background-size: auto;
            .clf;
        }
        &.blue {
            box-shadow: 0 4px 16px 0 rgba(68, 142, 246, 0.50);
            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#F687FF), to(#2E83FF));
        }
        &:after {
            display: block;
            position: absolute;
            .px2rem(right; 20px);
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            .px2rem(width; 28px);
            .px2rem(height; 28px);
            .px2rem(border-radius; 14px);
            background: rgba(0, 0, 0, .2);
            .tc;
            .px2rem(line-height; 28px);
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
            content: "\e6d6";
        }
    }
    li:first-child {
        margin-top: 0;
    }
}
.getreportguide{
    .mui-slider-group{
        width: 100%;
    height: 100%;
    }
    .mui-slider-item{
        width: 100%;
    height: 100%;
    }
    position: absolute;
    width: 100%;
    height: 100%;
    .num{
       font-size: 20px;
color: #448EF6;
.px2rem(line-height; 20px); 
    }
    .text{
        height: 50%;
        width: 100%;
        position: absolute;
        bottom: 0;
        .bgf;
        .px2rem(border-radius; 6px);
        box-shadow: 0 0 4px 4px rgba(0,0,0,0.03);
        font-size: 14px;
color: #333333;
.px2rem(padding; 80px; 32px);
white-space:normal;
>span{
    position: absolute;
    left: 50%;
    top: 0;
     transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    display: block;
    .tc;
    .px2rem(line-height; 48px);
    .px2rem(width; 48px);
    .px2rem(height; 48px);
    font-size: 24px;
    background: #000000;
    color: #fff;
}
img.img{
    .px2rem(width; 24px);
    .px2rem(padding; 0 ;4px);
    }

    }
    
}
.index-btnbox-wrap{
    padding: 0;
    overflow: hidden;
.index-btnbox{
    .px2rem(padding; 40px ;80px);
    background: url("../img/bg-bottomlang.png") no-repeat;
    background-size: cover;
    .wx-btn{
        margin: 0;
        .px2rem(height; 40px);
        .px2rem(line-height; 40px);
        font-size: 14px;
    }
}
}
ul.wx-radio-box{
  li{
      .cl6;
      .px2rem(padding-left; 40px);
      font-size: 16px;
      &:before{
          .px2rem(margin-right;10px);
          content: '';
          display: block;
          .px2rem(width; 20px);
          .px2rem(height; 20px);
          border: 1px solid #999;
          .px2rem(border-radius; 10px);
      }
      &.active{
          font-family: "iconfont" !important;
          font-size: 16px;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          &:after{
              background: #E3EEF2;
          }
          &:before{
          .tc;
          content: "\e6df";
          background: @colorlan;
          border: 1px solid @colorlan;
          .clf;
          }
      }
  }  
}
.shuijin-group {
        .bgf;
        overflow: hidden;
        .px2rem(margin-bottom; 10px);
        .px2rem(padding; 0; 20px);
        line-height: 1.6;
        font-size: 14px;
        color: #2A2A2A;
        .px2rem(padding-bottom; 20px);
        box-shadow: 0 2px 2px 0 #ddd;
        .title {
            font-size: 16px;
            .cl3;
            background: url("../images/bg-aboutUs-title.png") no-repeat center center;
            .px2rem(background-size; 164px; 1px);
            .px2rem(width; 164px);
            .px2rem(margin; 20px; auto);
            .tc;
            .px2rem(height; 22px);
            .px2rem(line-height; 22px);
        }
        .title-blue{
            opacity: 0.8;
            color: #000;
            background: none;
            position: relative;
            &:after {
                background: @colorlan;
                content: '';
                display: block;
                .px2rem(height; 2px);
                .px2rem(width; 32px);
                position: absolute;
                .px2rem(right; 67px);
                .px2rem(top; 26px);
            }
        }
        &.noLine{
        background: transparent;
        box-shadow: none;
        margin-bottom: 0;
        .px2rem(padding; 0; 32px);
        .px2rem(padding-bottom; 10px);
        }
    }
    
.wx-login-bg{
    ul.wx-tab{
         background: transparent;
        li{
            .cl6;
            &.active{
                color: #448EF6;
            }
        }
        i {
        width: 20%;
        position: absolute;
        bottom: 0;
        left: 0;
        margin-left: 15%;
        height: 2px;
        background-color: @colorbase;
        -webkit-transition-duration: 0.5s;
        /* Safari 和 Chrome */
        transition-timing-function: ease-in;
    } 
}
}
.cart-list{
    background: #fff;
    .px2rem(padding;
    20px);
    .px2rem(padding-bottom;
    0);
    .clf;
    .card-top-blue-wrap {
        .px2rem(border-radius;
        8px);
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#111349), to(#1885C3));
        .card-top-blue {
            background: url("../img/bg-card.png") no-repeat;
            background-size: contain;
            background-position: right;
            font-size: 14px;
            b {
                font-size: 28px;
                color: #44D1FF;
                .px2rem(margin-right;
                6px);
            }
            .px2rem(padding;
            17px;
            20px);
            .title {
                border-bottom: 1px dashed #fff;
                .px2rem(padding-bottom;
                10px);
                span {
                    background: #448EF6;
                    display: block;
                    color: #fff;
                    .px2rem(padding;
                    2px;
                    8px);
                    font-size: 12px;
                    text-align: center;
                    .px2rem(border-radius;
                    12px);
                    &.red{
                        background: #FB929E;
                    }
                }
            }
        }
    }
    .card-top-red-wrap {
        .card-top-blue-wrap;
        background: -webkit-gradient(linear, 0 0, 100% 100%, from(#FFA17D), to(#FF6B6B));
        .card-top-red {
            .card-top-blue;
        }
        .bottom-line{
            padding-bottom: 16px;
            border-bottom: 1px dashed #fff;
            .label{
                background: #fff;
                color: #FF5D73;
                border-radius: 10px;
                padding: 2px 10px;
                font-size: 12px;
            }
        }
    }
}
.line-tips-bggray{
    border-radius: 6px;
    .bgf5;
    padding: 10px;
    margin: 20px;
    font-size: 12px;
    color: #666666;
    line-height: 1.5;
    >b{
        color: #FB929E;
        .fn;
    }
}
ul.QAlist{
    li{
        padding: 0;
        padding:22px 0 ;
        >div{
            padding-left: 32px;
            position: relative;
            &:first-child{
                &.active{
                &:after{
                    -webkit-transform: rotate(-90deg);
                }
                }
                padding-right: 20px;
                &:before{
                    content: 'Q';
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: @colorbase;
                    height: 20px;
                    width: 20px;
                    .tc;
                    font-size: 12px;
                    line-height: 20px;
                    color: #fff;
                    border-radius:6px ;
                }
                &:after{
                    font-family: "iconfont" !important;
                      font-size: 16px;
                      font-style: normal;
                      -webkit-font-smoothing: antialiased;
                      -moz-osx-font-smoothing: grayscale;
                    content: '\e6d6';
                    position: absolute;
                    right: 0;
                    top: 0;
                    font-size: 12px;
                    -webkit-transform: rotate(90deg);
                }
            }
            &:last-child{
                display: none;
                margin-top: 20px;
                &:before{
                    content: 'A';
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: @colorbase;
                    height: 20px;
                    width: 20px;
                    .tc;
                    font-size: 12px;
                    line-height: 20px;
                    color: #fff;
                    border-radius:6px ;
                }
            }
        }
    }
}
.qa-nav{
    .myindex-nav;
    >a{
        color: #666;
        display: block;
        width: 33.3333%;
        svg {
            .px2rem(width;
            40px);
            .px2rem(height;
            40px);
        }
    }
    
    .px2rem(padding;
    15px;
    0);
    
}
.wx-btn2 {
    .bgf;
        .wkbox;
        >div{
            .wkbox .autoW;
            .wx-btn;
            &.btn1{
                
            }
            &.btn2{
                .wx-btnf;
            }
         &:last-child{
        .px2rem(margin-left; 5px);
        .px2rem(margin-right; 20px);
        }
         &:first-child{
        .px2rem(margin-right; 5px);
        .px2rem(margin-left; 20px);
        }
        .px2rem(margin-top;
        20px);
        .px2rem(height;
        40px);
        .px2rem(line-height;
        38px);
        font-size: 14px;
        .px2rem(margin-left;
        0);
        .px2rem(margin-right;
        0);
        }
    }